<script setup lang='ts'>

// type Props = {
//     color: string
//     size?: string
// }
// const props = defineProps<Props>()
// console.log(props.color)



const props = withDefaults(defineProps<{
    color: string
    size?: string
    changeSize: (newSize: string) => void
    btnType?: 'success' | 'danger' | 'warning'
}>(), {
    size: 'mini',
    btnType: 'success'
})
console.log(props.color)

const emit = defineEmits<{
    (e: 'changeColor', color: string): void
    (e: 'changeSize', size: string): void
}>()

const onBtnClick = () => {
    emit('changeColor', '好白呀')
}

</script>

<template>
    <div style="border: 10px solid red; width: 300px; height: 50px;">
        子组件- {{ color }} -- {{ size }} -- {{ btnType }}
    </div>
    <button @click="onBtnClick">修改颜色</button>
    <button @click="emit('changeSize', 'bigger')">修改尺寸-a</button>
    <button @click="changeSize('middle')">修改尺寸-b</button>
</template>

<style scoped></style>